<template>
  <button @click="getCodeContext">获取数据</button>
  <el-button @click="handleTheme">修改主题</el-button>
  <el-button type="primary" @click="format">格式化代码</el-button>
  <el-button type="success" @click="handleText">打印测试</el-button>
  <div ref="editorContainer" style="height:500px"></div>


</template>

<script>
import { onMounted, defineComponent, ref, toRaw } from 'vue'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
const codeContent = ref("");

const editorContainer = ref(null)
const editor = ref(null);
const editorTheme = ref("vs-dark");

export default defineComponent({
  setup() {
    onMounted(() => {
      editor.value = monaco.editor.create(editorContainer.value, {
        value: `console.log("hello world")`,
        theme: editorTheme.value, // 主题
        language: "json",
        folding: true, // 是否折叠
        foldingHighlight: true, // 折叠等高线
        foldingStrategy: "indentation", // 折叠方式  auto | indentation
        showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
        disableLayerHinting: true, // 等宽优化
        emptySelectionClipboard: false, // 空选择剪切板
        selectionClipboard: false, // 选择剪切板
        automaticLayout: true, // 自动布局
        codeLens: false, // 代码镜头
        scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
        colorDecorators: true, // 颜色装饰器
        accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
        lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
        lineNumbersMinChars: 5, // 行号最小字符   number
        readOnly: false, //是否只读  取值 true | false
      });
      // const model = editor.value.
      // monaco.editor.setModelMarkers(model, 'json', [{ // json为语言类型
      //   startLineNumber: 2,
      //   endLineNumber: 2,
      //   startColumn: 1,
      //   endColumn: 10,
      //   severity: monaco.MarkerSeverity.Error,
      //   message: `语法错误`,
      // }])
      // 监听内容变化
      editor.value.onDidChangeModelContent((e) => {
        console.log(e)
      });
      console.log(editor.value, "监听内容变化");
      // 监听失去焦点事件
      editor.value.onDidBlurEditorText((e) => {
        console.log(e)
      });

      renderTableData()

    });

    function renderTableData() {
      console.log(1)
    }

    // 获取编辑框内容
    function getCodeContext() {
      codeContent.value = toRaw(editor.value).getValue();
      return console.log(codeContent.value);
    }
    // 自动格式化代码
    function format() {
      toRaw(editor.value).trigger("anything", "editor.action.formatDocument");
      // 或者
      // this.editor.getAction(['editor.action.formatDocument']).run()
    }
    // 修改主题
    function handleTheme() {
      monaco.editor.setTheme("vs");
    }
    // 打印测试
    function handleText() {
      console.log(monaco.languages.getLanguages())
    }
    return {
      handleText,
      editorContainer,
      getCodeContext,
      format,
      handleTheme
    }
  }
})
</script>


